﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
<!DOCTYPE html public "-//w3c//dtd html 4.01 transitional//en"
          "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="~/aa/vue/dist/vue.js"></script>
    <script src="~/aa/element-ui/lib/index.js"></script>
    <link href="~/aa/element-ui/lib/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/aa/axios/dist/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style type=text/css>
        #body2 {
            background: url('/images/登录界面.jpg') no-repeat;
            background-size: 100% 140%;
        }

        #login_box {
            width: 30%;
            height: 400px;
            background: rgba(0, 0, 0, 0.6);
            /*rgba设置透明层*/
            background-color: #00000060;
            /*八位颜色位设置透明层*/
            margin: auto;
            margin-top: 10%;
            text-align: center;
            border-radius: 10px;
            padding: 50px 50px;
        }

        h2 {
            color: #ffffff90;
            margin-top: 5%;
        }

        #input-box {
            margin-top: 5%;
        }

        span {
            color: #fff;
        }

        input {
            border: 0;
            width: 60%;
            font-size: 15px;
            color: #fff;
            background: transparent;
            border-bottom: 2px solid #fff;
            padding: 5px 10px;
            outline: none;
            margin-top: 10px;
        }

        button {
            margin-top: 50px;
            width: 60%;
            height: 30px;
            border-radius: 10px;
            border: 0;
            color: #fff;
            text-align: center;
            line-height: 30px;
            font-size: 15px;
            background-image: linear-gradient(to right, #30cfd0, #330867);
        }

        #sign_up {
            margin-top: 45%;
            margin-left: 60%;
        }

        a {
            color: #b94648;
        }

        .error-message {
            color: red;
            margin-bottom: 10px;
            font-size: 15px;
            animation: fadeOut 3s;
        }
    </style>
    <script>
        // 使用JavaScript延迟移除错误提示元素的类，使其消失
        setTimeout(function () {
            var errorMessage = document.querySelector('.error-message');
            errorMessage.classList.remove('error-message');
        }, 3000); // 3秒后移除类
    </script>
</head>
<body id="body2">
    <div id="app">
        <form action="/User/Login" method="post">
            <div id="login_box">
                <h2>LOGIN</h2>
                <!-- 添加错误提示和成功提示 -->
                @if (!string.IsNullOrEmpty(TempData["ErrorMessage"] as string))
                {
                    <div class="error-message">@TempData["ErrorMessage"]</div>
                }
                <div id="input_box">
                    <input id="UName" name="UName" placeholder="请输入用户名" />
                </div>
                <div class="input_box">
                    <input id="userPassword" name="UPassWord" type="password" placeholder="请输入密码" />
                </div>
                <button>登录</button><br>
            </div>
        </form>
    </div>
</body>
</html>